<script setup>
import { ref } from 'vue'
import {
  House,
  LocationInformation,
  Document,
  ChatDotRound,
  FolderAdd,
  ArrowLeftBold
} from '@element-plus/icons-vue'
import { ElDropdown, ElDropdownMenu, ElDropdownItem, ElIcon } from 'element-plus';
import router from "@/router";
// 假设你已经定义了 logout 方法来处理用户登出
const handleCommand = (command) => {
  if (command === 'logout') {
    // 执行登出操作
    logout();
  }
};

const logout = () => {
  router.push('/home');
};

const handleOpen = (key, keyPath) => {
  console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
  console.log(key, keyPath)
}
// 从sessionStorage获取当前登录用户的loginUser对象
const loginUser = ref(null);
if (sessionStorage.getItem('loginUser')) {
  loginUser.value = JSON.parse(sessionStorage.getItem('loginUser'));
}

</script>

<template>
  <!-- 导航栏-->
  <el-menu
      default-active="/home/classroom/index"
      mode="horizontal"
      router="true"
      class="el-menu-horizontal-demo"
      :collapse="false"
      @open="handleOpen"
      @close="handleClose"
  >
    <el-menu-item index="/home">
      <el-icon><ArrowLeftBold /></el-icon>
      <template #title></template>
    </el-menu-item>
    <el-menu-item index="/home/classroom/index">
      <el-icon><House /></el-icon>
      <template #title>首页</template>
    </el-menu-item>
    <el-menu-item index="/home/classroom/sign">
      <el-icon><LocationInformation /></el-icon>
      <template #title>签到</template>
    </el-menu-item>
    <el-menu-item index="/home/classroom/choose">
      <el-icon><FolderAdd /></el-icon>
      <template #title>选课</template>
    </el-menu-item>
    <el-sub-menu index="1">
        <template #title>
          <el-icon><Document /></el-icon>
          <span style="font-size: 18px">课程中心</span>
        </template>
      <el-menu-item index="/home/classroom/course">本学期课程</el-menu-item>
      <el-menu-item index="/home/classroom/history">往学期课程</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="/home/classroom/message">
      <el-icon><ChatDotRound /></el-icon>
      <template #title>消息中心</template>
    </el-menu-item>

  <!-- 用户名显示 -->
  <div class="user-info">
    <div class="avatar-container">
      <el-avatar
          src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
      />
    </div>
    <el-dropdown class="user-dropdown" v-if="loginUser && loginUser.sname" trigger="hover" @command="handleCommand">
      <span class="el-dropdown-link">
        {{ loginUser.sname }}
        <i class="el-icon-arrow-down el-icon--right"></i>
      </span>
      <template #dropdown>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="logout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
  </el-menu>
</template>

<style scoped>
/* 设置所有菜单项的字号 */
.el-menu-item,
.el-sub-menu__title {
  font-size: 18px!important;
}

/* 设置激活状态下的菜单项字号，保持一致 */
.el-menu-item.is-active,
.el-sub-menu__title.is-active {
  font-size: 18px !important;
}
el-sub-menu__title el-tooltip__trigger el-tooltip__trigger{
  font-size: xx-large;
}
/* 设置子菜单标题悬停效果 */
.el-sub-menu__title:hover {
  background-color: #f5f5f5 !important;
}

/* 设置子菜单下拉的样式 */
.el-sub-menu .el-menu--popup {
  border: 1px solid #e4e7ed !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !important;
}
.user-info {
  display: flex;
  align-items: center; /* 垂直居中对齐 */
  padding-top: 10px; /* 根据需要调整内边距 */
  margin-left: 450px;
  margin-bottom: 14px;
}

.avatar-container {
  margin-right: 10px; /* 头像和用户名之间的间距 */
}

.user-name {
  font-size: 20px;
  padding-bottom: 5px;
  /* 移除了固定的padding-left，使用flex布局来控制位置 */
}
</style>